<template>
  <div id="app">
    <el-container class="contentbox">
      <el-header>
        <div class="header-left">
          <img src="../assets/logo.png" alt="" />
        </div>
        <div class="header-right">
          <i class="el-icon-bell"></i>
          <img src="../assets/username.png" alt="" />
          <span>用户名</span>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            active-text-color="#eb6317"
            text-color="#424242"
            :router="true"
            >
            <el-menu-item :index="item.path + ''" v-for="(item,i) in menulist" :key="i" @click="click(item.path)">
              <i class="el-icon-menu"></i>
              <span slot="title">{{item.name}}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menulist: [
        {id: 0, name: '展会管理', path: '/exhibition'},
        {id: 1, name: '资料管理', path: '/data'},
        {id: 2, name: '订单管理', path: '/order'},
        {id: 3, name: '角色管理', path: '/role'},
        {id: 4, name: '用户管理', path: '/user'},
        {id: 5, name: '系统管理', path: '/system'},
      ],
      activePath: ''
    }
  },
  methods: {
    click(i) {
      console.log(i);
    }
  },
};
</script>

<style scoped>
.contentbox {
  height: 100%;
}
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #e9e9e9;
}

.header-left {
  margin-top: 14px;
}
.header-right {
  height: 24px;
  vertical-align: middle;
}

.el-aside {
  height: 100%;
  padding-top: 12px;
  box-shadow: 7px 0 12px rgba(225,225,225,0.7);
}

.el-menu {
  border-right: 0;
}
.active {
  background-color: #fcf8f5!important;
}

</style>
